@import '~@hi-ui/core-css/lib/index.scss';
@import './zen-mode.var.scss';

$prefix: '#{$component-prefix}-zen-mode' !default;

.#{$prefix} {
  font-size: $zen-mode-text-size;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: use-zindex('dialog');
  background: use-color-static('white');
  transition: opacity 0.3s, height 0s 0.3s;
  overflow: auto;

  &__content {
    width: 80%;
    margin: 0 auto;
  }

  &__wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
  }

  &__back-btn {
    cursor: pointer;
    padding: use-spacing(2) use-spacing(6);
    border-radius: use-border-radius('normal');
    display: inline-block;
    transition: background 0.3s;

    &:hover {
      background-color: use-color('gray', 200);
    }
  }

  &__toolbar {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid use-color('gray', 200);
    background-color: use-color-static('white');
    display: flex;
    align-items: center;
    padding: 0 use-spacing(10);
    opacity: 0.8;
    transition: opacity 0.8s;
  }

  &__toolbar-opt {
    flex: 1;
  }

  &__toolbar--hide {
    opacity: 0;
  }
}
